<template>
	<div class="div-user-sum">
		<div class="div-top">
			<span>导入出错试题管理</span>
		</div>
		<span class="search_label">题干:</span>
		<el-input v-model='searchForm.question' placeholder="请输入题干" style="width:207px;margin-left: 10px" clearable></el-input>
		<span class="search_label">题型:</span>
		<el-select v-model='searchForm.questionType' placeholder="请选择题型" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in questionTypes" :key="item.value" :label="item.name" :value="item.value">
			</el-option>
		</el-select>
		<span class="search_label">难度:</span>
		<el-select v-model='searchForm.difficulty' placeholder="试题难度" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in difficultys" :key="item.value" :label="item.name" :value="item.value">
			</el-option>
		</el-select>
		<span class="search_label">试题类型:</span>
		<el-select v-model='searchForm.questionUse' placeholder="试题类型" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in questionUses" :key="item.value" :label="item.name" :value="item.value">
			</el-option>
		</el-select>
		<span class="search_label">所属专业:</span>
		<el-select v-model='searchForm.majorId' placeholder="请选择专业" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
		<el-button type="primary" @click="currentChange(1)" style="margin-left: 5px">搜索</el-button>
		<el-button type="primary" @click="openDown()" style="margin-left: 5px">导出错题</el-button>
		<div class="topic_tables green_table" style="margin: 20px;">
			<el-table :data="dataList" border stripe @sort-change='sortChange' >
				<el-table-column prop="question" align="center" label="题干">
					<template slot-scope="scope">
						<span class="editor_box" v-html="scope.row.question"></span>
					</template>
				</el-table-column>
				<el-table-column prop="questionType" align="center" label="题型">
					<template slot-scope="scope">
						<span v-for='item in questionTypes' v-if="item.value == scope.row.questionType">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="difficulty" label="难度" align="center" sortable='custom'>
					<template slot-scope="scope">
						<span v-for='item in difficultys' v-if="item.value == scope.row.difficulty">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="questionUse" label="试题类型" align="center">
					<template slot-scope="scope">
						<span v-for='item in questionUses' v-if="item.value == scope.row.questionUse">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="majorName" label="所属专业" align="center">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center">
				</el-table-column>
				<el-table-column prop="errorReason" label="出错原因" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center" width='180'>
					<template slot-scope="scope">
						<el-button size='small' type='success' @click="openInfo(scope.row)">查看</el-button>
						<el-button size='small' type='danger' @click="openDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="margin: 10px; text-align: center;">
			<el-pagination background @current-change="currentChange" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" layout="prev, pager, next, total, jumper" :total="searchForm.total">
			</el-pagination>
		</div>
		<el-drawer :visible.sync="topicShow" :with-header="false" :size='450'>
			<div class="topic_info">
				<div class="topic_info_title">试题详情</div>
				<div class="topic_info_body beautifulScroll" v-if='topicShow'>
					<div class="topic_info_type">
						所属专业：【{{openTopic.majorName}}】
					</div>
					<questionview :readonly='true' :allshow='true' :showanswer='true' :form="openTopic"></questionview>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import questionview from "@/components/question/questionview.vue"
	import questioninput from "@/components/question/questioninput.vue"
	import { teacherInfo } from "@/api/teacher.js"
	import { majorList } from "@/api/major.js"
	import { topicErrorList, removeTopicError, selectTopicErrorDetail, topicErrorExport } from "@/api/topicError.js"
	export default {
		components: {
			questionview,
			questioninput
		},
		data() {
			return {
				dataList: [],
				majors: [],
				topicShow: false,
				openTopic: {},
				searchForm: {
					pageNum: 1,
					pageSize: 8,
					total: 0,
					question: '',
					questionType: '',
					difficulty: '',
					questionUse: '',
					orderBy: 'updateTime',
					ascDesc: 'desc',
					majorId: '',
				},
				questionTypes: [{
					name: '单选题',
					value: 'SINGLE'
				}, {
					name: '多选题',
					value: 'MULTIPLE'
				}, {
					name: '判断题',
					value: 'JUDGE'
				}],
				difficultys: [{
					name: '简单',
					value: 'SIMPLE'
				}, {
					name: '中等',
					value: 'MEDIUM'
				}, {
					name: '困难',
					value: 'DIFFICULTY'
				}],
				questionUses: [{
					name: '作业试题',
					value: '1'
				}, {
					name: '考核试题',
					value: '2'
				}],
			}
		},
		created() {
			this.getinfo();
			this.getMajors();
		},
		mounted() {

		},
		methods: {
			openInfo(topic) {
				selectTopicErrorDetail({
					topicErrorId: topic.topicErrorId
				}).then(res => {
					this.openTopic = Object.assign({}, topic, res.data);
					this.topicShow = true;
				})
			},
			openDelete(topic) {
				this.$confirm('是否删除该试题?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					removeTopicError({
						topicErrorId: topic.topicErrorId
					}).then(async res => {
						if(res.code == '200') {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.currentChange(1);
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							})
						}
					})
				}).catch(() => {});
			},
			openDown() {
				topicErrorExport(this.searchForm).then(res => {
					this.reGet();
				})
			},
			reGet() {
				this.searchForm.question = '';
				this.searchForm.questionType = '';
				this.searchForm.difficulty = '';
				this.searchForm.questionUse = '';
				this.searchForm.majorId = '';
				this.searchForm.orderBy = 'updateTime';
				this.searchForm.ascDesc = 'desc';
				this.currentChange(1);
			},
			sortChange(data) {
				this.searchForm.orderBy = data.prop;
				this.searchForm.ascDesc = data.order == "descending" ? "desc" : "asc";
				this.currentChange(1);
			},
			currentChange(pageNum) {
				this.searchForm.pageNum = pageNum;
				this.getDataList();
			},
			getDataList() {
				topicErrorList(this.searchForm).then(async res => {
					this.dataList = res.data.list;
					this.searchForm.total = res.data.total;
				})
			},
			getMajors() {
				majorList().then(res => {
					this.majors = res.data
				})
			},
			getinfo() {
				teacherInfo().then(res => {
					if(res.code == '200') {
						this.userinfo = res.data;
						this.getDataList()
					}
				})
			},
		},
	}
</script>